
<template>
  <div class="statistics">
    <div class="container">
      <div class="title">今日统计</div>
      <div class="column" style="display: flex; flex-wrap: wrap;">
        <div class="item" v-for="(item,index) in actor" :key="index">
          <div>
            <div class="item-title">{{item.title}}</div>
            <div class="item-num mar">{{item.monthNum}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
//http://localhost:8080/index.html?userId=111&shopId=18&roleType=manager#/statistics
//角色类型[总经理：manager，市场：market，销售:salesman，售后：afterSale]
export default {
  name: 'statistics',
  data() {
    return {
      userId: this.$.query('userId'),
      shopId: this.$.query('shopId'),
      roleType: this.$.query('roleType'),
      refDate: this.$.query('refDate'),
      actor: '',
      wechatOpenId: this.$.query('wechatOpenId'),

      salesman: [
        {
          title: '累计潜客记录数',
          monthNum: ''
        }, {
          title: '今日新增潜客数',
          monthNum: ''
        }, {
          title: '今日签约数',
          monthNum: ''
        }, {
          title: '今日战败数',
          monthNum: ''
        }, {
          title: '今日订单数',
          monthNum: ''
        }, {
          title: '今日订单总额',
          monthNum: ''
        }
      ],

      manager: [
        {
          title: '当前发布活动',
          monthNum: ''
        }, {
          title: '今日活动数',
          monthNum: ''
        }, {
          title: '未开始活动',
          monthNum: ''
        }, {
          title: '已开始活动',
          monthNum: ''
        }, {
          title: '参与用户数',
          monthNum: ''
        }, {
          title: '维保订单',
          monthNum: ''
        }, {
          title: '救援记录',
          monthNum: ''
        }, {
          title: '维保订单金额',
          monthNum: ''
        }, {
          title: '累计潜客记录数',
          monthNum: ''
        }, {
          title: '今日新增潜客数',
          monthNum: ''
        }, {
          title: '今日签约数',
          monthNum: ''
        }, {
          title: '今日战败数',
          monthNum: ''
        }, {
          title: '今日订单数',
          monthNum: ''
        }, {
          title: '今日订单总额',
          monthNum: ''
        }
      ],

      market: [
        {
          title: '当前发布活动',
          monthNum: ''
        }, {
          title: '今日活动数',
          monthNum: ''
        }, {
          title: '未开始活动',
          monthNum: ''
        }, {
          title: '已开始活动',
          monthNum: ''
        }, {
          title: '参与用户数',
          monthNum: ''
        }
      ],

      afterSale: [
        {
          title: '所有维保订单',
          monthNum: ''
        }, {
          title: '当日维保订单',
          monthNum: ''
        }, {
          title: '当日救援记录',
          monthNum: ''
        }, {
          title: '当日维保订单金额',
          monthNum: ''
        }
      ]
    }
  },
  created() {
    // @TEST
    // this.$.host = 'http://192.168.50.24:8080'

    this.$.get({
      "clientType": this.$.getClientType,
      "methodName": "QueryKpiByRole",
      "shopId": this.shopId,
      "userId": this.userId,
      "roleType": this.roleType,
      "refDate": this.refDate
    })
      .then(res => {
        console.log(res)
        switch (res.data.roleType) {
          case 'manager':
            // /** 当前发布活动 */
            // private String activityCount;
            // /** 今日活动数 */
            // private String dayActivityCount;
            // /** 未开始活动 */
            // private String nobeginActivityCount;
            // /** 已开始活动 */
            // private String continueActivityCount;
            // /** 参与用户数 */
            // private String attendCount;
            // // 售后：维保订单8个、救援记录4个、维保订单金额10元
            // /** 维保订单 */
            // private String maintainOrderCount;
            // /** 救援记录 */
            // private String rescueCount;
            // /** 维保订单金额 */
            // private String maintainOrderAmount;
            // // 销售：累计潜客记录数、今日新增潜客数、今日签约数、今日战败数、今日订单数、今日订单总额 (今日即 昨日)
            // /** 累计潜客记录数 */
            // private String totalPotentialCount;
            // /** 今日新增潜客数 */
            // private String dayPotentialCount;
            // /** 今日签约数 */
            // private String daySignCount;
            // /** 今日战败数 */
            // private String dayFailureCount;
            // /** 今日订单数 */
            // private String dayOrderCount;
            // /** 今日订单总额 */
            // private String dayOrderAmount;
            this.manager[0].monthNum = res.data.manager.activityCount || 0
            this.manager[1].monthNum = res.data.manager.dayActivityCount || 0
            this.manager[2].monthNum = res.data.manager.nobeginActivityCount || 0
            this.manager[3].monthNum = res.data.manager.continueActivityCount || 0
            this.manager[4].monthNum = res.data.manager.attendCount || 0
            this.manager[5].monthNum = res.data.manager.maintainOrderCount || 0
            this.manager[6].monthNum = res.data.manager.rescueCount || 0
            this.manager[7].monthNum = res.data.manager.maintainOrderAmount || 0
            this.manager[8].monthNum = res.data.manager.totalPotentialCount || 0
            this.manager[9].monthNum = res.data.manager.dayPotentialCount || 0
            this.manager[10].monthNum = res.data.manager.daySignCount || 0
            this.manager[11].monthNum = res.data.manager.dayFailureCount || 0
            this.manager[12].monthNum = res.data.manager.dayOrderCount || 0
            this.manager[13].monthNum = res.data.manager.dayOrderAmount || 0
            break;
          case 'market':
            // /** 当前发布活动 */
            // private String activityCount;
            // /** 今日活动数 */
            // private String dayActivityCount;
            // /** 未开始活动 */
            // private String nobeginActivityCount;
            // /** 已开始活动 */
            // private String continueActivityCount;
            // /** 参与用户数 */
            // private String attendCount;
            this.market[0].monthNum = res.data.market.activityCount || 0
            this.market[1].monthNum = res.data.market.dayActivityCount || 0
            this.market[2].monthNum = res.data.market.nobeginActivityCount || 0
            this.market[3].monthNum = res.data.market.continueActivityCount || 0
            this.market[4].monthNum = res.data.market.attendCount || 0
            break;
          case 'salesman':
            // /** 累计潜客记录数 */
            // private String totalPotentialCount;
            // /** 今日新增潜客数 */
            // private String dayPotentialCount;
            // /** 今日签约数 */
            // private String daySignCount;
            // /** 今日战败数 */
            // private String dayFailureCount;
            // /** 今日订单数 */
            // private String dayOrderCount;
            // /** 今日订单总额 */
            // private String dayOrderAmount;
            console.log(111)
            this.salesman[0].monthNum = res.data.salesman.totalPotentialCount || 0
            this.salesman[1].monthNum = res.data.salesman.dayPotentialCount || 0
            this.salesman[2].monthNum = res.data.salesman.daySignCount || 0
            this.salesman[3].monthNum = res.data.salesman.dayFailureCount || 0
            this.salesman[4].monthNum = res.data.salesman.dayOrderCount || 0
            this.salesman[5].monthNum = res.data.salesman.dayOrderAmount || 0
            break;
          case 'afterSale':
            // /** 所有维保订单 */
            // private String maintainOrderCount;
            // /** 当日维保订单 */
            // private String dayMaintainOrderCount;
            // /** 当日救援记录 */
            // private String rescueCount;
            // /** 当日维保订单金额 */
            // private String maintainOrderAmount;
            this.afterSale[0].monthNum = res.data.afterSale.maintainOrderCount || 0;
            this.afterSale[1].monthNum = res.data.afterSale.dayMaintainOrderCount || 0;
            this.afterSale[2].monthNum = res.data.afterSale.rescueCount || 0;
            this.afterSale[3].monthNum = res.data.afterSale.maintainOrderAmount || 0;
            break;
        }
        this.actor = this[this.roleType]
      })
  },
  methods: {

  }
}


</script>
<style scoped>
.statistics {
  padding: 2em;
  display: flex;
  justify-content: center;
}
.container {
  width: 100%;
  border: 1px solid #f98700;
  padding: 1em;
  border-radius: 10px;
  box-shadow: 10px 10px 5px #ececec;
}
.title {
  font-size: 24px;
  display: flex;
  justify-content: center;
}
.row {
  display: flex;
  justify-content: center;
}
.item {
  display: flex;
  justify-content: center;
  padding: 0.5em;
  margin: 1em 0.5em 0 0.5em;
  background: #e2e2e2;
  border-radius: 15px;
  width: 45%;
}
.item-title {
  display: flex;
  justify-content: center;
  font-size: 14px;
  font-weight: bolder;
}
.item-num {
  display: flex;
  color: #f98700;
  font-size: 16px;
  font-weight: bolder;
  justify-content: center;
  align-items: center;
}
.mar {
  margin-top: 10px;
}
.mar-right {
  margin-right: 10px;
}
</style>
